import {designPage} from "@peryl/react-compose";
import {GridCol, GridRow, i18n, Icon, RollingNumber, Tooltip} from "plain-design";
import {createNextGetter} from "../../common/createNextGetter";
import {randomNumber} from "../../common/randomNumber";
import {chunk} from '@peryl/utils/chunk';
import {shuffle} from '@peryl/utils/shuffle';
import {buildAssetsPath} from "../../common/buildAssetsPath";

export const UserInfoApplication = designPage(() => {

  const projectOptions = i18n.$intl('page.workspace.projects').d('') as any as { title: string, logo: string, description: string }[];
  const nextProject = createNextGetter(projectOptions);

  const applications = shuffle(
    shuffle(
      new Array(30).fill(1).map((_, index) => {
        const { title, logo } = nextProject();
        return {
          id: `_${index}`,
          title,
          logo,
          activeUserAmount: randomNumber(9, 20),
          newUserAmount: randomNumber(1000, 2000),
        };
      })
    )
  );

  return () => (
    <div>
      {chunk(applications, 3).map((list, listIndex) => {
        return (
          <GridRow key={listIndex} rowGutter="normal" gutter="normal">
            {list.map((item, itemIndex) => (
              <GridCol key={itemIndex} span={8}>
                <div className="user-info-project-item">
                  <div className="user-info-project-item-data">
                    <div>
                      <div className="user-info-project-item-title">
                        <img src={buildAssetsPath(item.logo)}/>
                        <span>{item.title}</span>
                      </div>
                      <span className="user-info-project-item-data-title">{i18n.$intl('page.userInfoPage.activeUserAmount').d('活跃用户')}</span>
                      <span>
                        <span>{item.activeUserAmount}</span>
                        <span className="user-info-project-item-data-unit">{i18n.$intl('page.userInfoPage.unit').d('万')}</span>
                      </span>
                    </div>
                    <div>
                      <span className="user-info-project-item-data-title">{i18n.$intl('page.userInfoPage.newUserAmount').d('新增用户')}</span>
                      <span><RollingNumber val={item.newUserAmount}/></span>
                    </div>
                  </div>
                  <div className="user-info-project-item-operation">
                    <Tooltip message={i18n.$intl('page.userInfoPage.download').d("下载")}>
                      <div><Icon icon="pi-download"/></div>
                    </Tooltip>
                    <Tooltip message={i18n.$intl('page.userInfoPage.edit').d("编辑")}>
                      <div><Icon icon="pi-edit"/></div>
                    </Tooltip>
                    <Tooltip message={i18n.$intl('page.userInfoPage.share').d("分享")}>
                      <div><Icon icon="pi-share-alt"/></div>
                    </Tooltip>
                    <Tooltip message={i18n.$intl('page.userInfoPage.more').d("更多")}>
                      <div><Icon icon="pi-more"/></div>
                    </Tooltip>
                  </div>
                </div>
              </GridCol>
            ))}
          </GridRow>
        );
      })}
    </div>
  );
});
